<template>
  <el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="'多表模式代码生成'"
             append-to-body width="1090px">
    <!--表单组件-->
    <el-row :gutter="12">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 10px" v-for="(item, index) in items">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{item.tableName}}</span>
          </div>
          <!--工具栏-->
          <div class="head-container">
          </div>
          <!--表格渲染-->
          <el-table v-loading="loading" :data="item.tableColumn" size="small" highlight-current-row
                    style="width: 100%;">
            <el-table-column label="名称" prop="columnName"/>
            <el-table-column label="注释" prop="columnComment"/>
            <el-table-column label="数据类型" align="center" prop="dataType"/>
            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.selected"
                  :disabled="scope.row.disabled"
                  active-color="#409EFF"
                  inactive-color="#ADADAD"
                  @change="changeEnabled(item.tableName,scope.row, scope.row.selected)"/>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
    import checkPermission from '@/utils/permission'
    import initData from '@/mixins/initData'
    import {queryColumnInfo, handleMultiTableModelGenerator} from '@/api/code-tools'

    export default {
        name: 'multiModelGenerator',
        components: {},
        mixins: [initData],
        data() {
            return {
                loading: false,
                delLoading: false,
                dialog: false,
                switchEnabled: false,
                queryTypeOptions: [
                    {key: 'name', display_name: '字典名称'},
                    {key: 'remark', display_name: '描述'}
                ],
                items: []
            }
        },
        created() {
            this.$nextTick(() => {
                this.init()
            })
        },
        methods: {
            checkPermission,
            beforeInit() {
                return true
            },
            cancel() {
                this.resetForm();
            },
            resetForm() {
                this.dialog = false;
            },
            doSubmit() {
                const items = this.items;
                console.log(items);
                handleMultiTableModelGenerator(items).then(res => {
                    this.loading = false;
                    console.log(res.data);
                }).catch(() => {
                    this.loading = false;
                })
            },
            doQueryColumnInfoFromTableName(tableNameList) {
                queryColumnInfo({
                    tableNameList: tableNameList
                }).then(res => {
                    this.loading = false;
                    this.items = res.data;
                }).catch(() => {
                    this.loading = false;
                })
            },
            // 改变状态
            changeEnabled(tableName, data, flag) {
                console.log(tableName);
                console.log(flag);
                const items = this.items.filter(item => {
                    if (item.tableName === tableName) {
                        return true
                    }
                });
                items[0].tableColumn.forEach(function (item, index) {
                    item.disabled = flag;
                });
                data.disabled = false;
                this.$notify({
                    title: data.columnName + '成功',
                    type: 'success',
                    duration: 2500
                })
            }
        }
    }
</script>

<style scoped>

</style>
